{% extends 'home/public/base.html' %}


{% block css %}
<link rel="stylesheet" type="text/css" href="/static/home/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/home/css/cart-app.css">


{% endblock %}

{% block con %}
<div class="navbar-left" style="position: absolute;top:25px;left: 150px;z-index: 99999;">
    <ol class="breadcrumb">
        <li style="color: red">购物车</li>
        <li>确认订单</li>
        <li>在线支付</li>
        <li>完成 </li>
    </ol>
</div>

<div class="mainbody cart" style="padding-top:170px ">
        <div class="container">
            <!-- 购物车详情头 -->
            <table class="cart-header">
                <tbody>
                    <tr>
                        <td class="cart-col-select-all col-md-3 col-xs-3 col-sm-3">
                            <div class="cart-select-all JSelectAll">
                                <div class="mz-checkbox"></div>
                                <span class="cart-select-title">全选</span>
                            </div>
                        </td>
                        <td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
                        <td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
                        <td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
                        <td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
                        <td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">操作</td>
                    </tr>
                </tbody>
            </table><!-- 购物车详情头 E-->
            
            <!-- 购物清单信息列表 -->
            <div class="cart-merchant-list">
                <div class="cart-merchant">
                    <table class="cart-merchant-body">
                        <tbody>
                            {% for v in clist %}
                            <tr class="cart-product" id="pro5">
                                <td class="cart-col-select col-md-3 col-xs-4 col-sm-4">  
                                    <div class="mz-checkbox " cid={{ v.id }}></div> 
                                    <a href="meilanx.html" class="cart-product-link" target="_blank">
                                        <img src="{{ v.gid.pic }}" class="cart-product-img" alt="魅蓝 X">
                                    </a>
                                </td>
                                <td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
                                    <a href="meilanx.html" class="cart-product-link" target="_blank">
                                      <p>{{ v.gid.title }}</p>
                                    </a>
                                    <p class="">
                                        
                                    </p>
                                   
                                </td>
                                <td class="cart-col-price col-md-2 hidden-xs hidden-sm">
                                    <p>
                                        <span class="cart-product-price">{{ v.gid.price }}</span>
                                    </p>
                                </td>
                                <td class="cart-col-number col-md-2 hidden-xs hidden-sm">
                                    <div class="cart-product-number-adder">
                                        <p class="cart-product-number-max show"></p>
                                        <div class="mz-adder" sid='{{ v.gid.id }}'>
                                            <button class="mz-adder-subtract"></button>
                                            <div class="mz-adder-num"><input name=num class="mz-adder-input" value="{{ v.num }}" type="text"></div>
                                            <button class="mz-adder-add"></button>
                                        </div>
                                    </div>
                                </td>
                                {% load pagetag %}
                                <td class="cart-col-total col-md-1 hidden-xs hidden-sm">
                                    <span class="cart-product-price total">{% cheng v.num v.gid.price %}</span>
                                </td>
                                <td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">
                                    <div class="cart-product-remove" sid='{{ v.id }}'>
                                        <span class="glyphicon glyphicon-remove cartdel"></span>
                                    </div>
                                </td>
                            </tr>   
                            {% endfor %}
                           
                        </tbody>
                    </table>
                </div>
            </div><!-- 购物清单信息列表 E-->
        </div>
        <!-- 结算详情 -->
        <div class="cart-footer" id="cartFooter">
            <div class="container">
               <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
                   <div class="cart-select-all JSelectAll" data-mdesc="全选按钮" data-mtype="store_cart_all">
                        <div class="mz-checkbox"></div>
                        <span class="cart-select-title">全选</span>
                   </div>
                   <!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
                   <span class="cart-footer-count">
                        共
                        <span class="cart-footer-num" id="totalCount">0</span>
                        件商品
                   </span>
                </div>
                <div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
                    <span class="cart-footer-sum">
                   
                        <span class="cart-footer-text"> 合计(不含运费)：</span>
                        <span class="cart-footer-total" id="totalPrice">0</span>
                    </span>
                    <form style="display: inline-block;" action="{% url 'home_confirmorder' %}" method="get">
                    <input type="hidden" name="ids" value="">
                    <a class="mz-btn success" type="button" href="{% url 'home_cartsdel' %}" >清空购物车</a>
                    <button class="mz-btn success" id="cartSubmit">去结算</button>
                    </form>
                </div>
            </div>
        </div><!-- 结算详情 E-->
    </div>

<script type="text/javascript">
 
// 提交事件
$('#cartSubmit').click(function(){

    ids = Total()
    
    if(ids.length == 0){
        alert('请先选择要购买的商品')
        return false;
    }

    // 数组转json
    res = JSON.stringify(ids);
    // 把已经选择的商品id加入到表单中
    $('input[name=ids]').val(res)

})




// 购物车 选框的js事件
allSelect()
function allSelect(){
    var aee = false;
    var see = false;

    // 全选
    $('.JSelectAll .mz-checkbox').click(function(){
        if(aee==false){
          $('.cart-select-all .mz-checkbox').addClass('checked');
          $('.cart-col-select .mz-checkbox').addClass('checked');
          aee = true;
        }else if(aee==true){
          $('.cart-select-all .mz-checkbox').removeClass('checked');
          $('.cart-col-select .mz-checkbox').removeClass('checked');
          aee = false;
        }
        Total()
    })

    //单选
    $('.cart-col-select .mz-checkbox').click(function(){

        $(this).toggleClass("checked")
        $('.cart-select-all .mz-checkbox').removeClass('checked');
        aee = false;

        // if(see==false){
        //   $(this).addClass('checked');
        //   see = true;
        // }else if(see==true){
        //   $(this).removeClass('checked');
        //   see = false;
        // }
        Total()
    })
    
}
function Total(){
    // 获取元素的购买数量
    var num = 0
    var totalnum = 0 
    var ids = []
    $('.cart-merchant-body .checked').each(function(){

        num += Number($(this).parents('tr').find('input[name=num]').val())

        totalnum += Number($(this).parents('tr').find('.total').html())
        ids.push(Number($(this).attr('cid')))


    })

    // 更新数量

    $('#totalCount').html(num)
    // 更新总价
    $('#totalPrice').html(totalnum)
        // 数组转json
    res = JSON.stringify(ids);
    // 把已经选择的商品id加入到表单中
    $('input[name=ids]').val(res)


    return ids
}

// 绑定数量加减事件
$('.mz-adder button').click(function(){

    // 获取当前数量
    var num = Number($(this).parent().find('input[name=num]').val())
    // 获取当前元素的class类
    var cls = $(this).attr('class')

    // 判断属性
    if(cls=='mz-adder-subtract'){
        num -= 1;
    }else if(cls == 'mz-adder-add'){
        num += 1;
    }

    if(num<=1){
        num = 1
    }
    // 执行更新
    $(this).parent().find('input[name=num]').val(num)
    changenum(num,$(this))
})
// 给数量绑定一个change时间

$('.mz-adder-input').change(function(){

    changenum($(this).val(),$(this))
})

// 发送ajax请求，修改数据库的商品数量

function changenum(num,res){

    gid = res.parents('.mz-adder').attr('sid')

    // 发送ajax请求
    $.get('{% url "home_cartedit" %}',{'num':num,'gid':gid},function(data){

        // alert(data['msg'])

        // 判断是否成功
        if(data['code'] == 0){
            // 成功后,则刷新页面
            location.href = location.href
        }
    },'json')
 
}


// 购物车删除
$('.cartdel').click(function(){
    // 获取id
    cid = $(this).parent().attr('sid')
    hh = $(this)
    // 发送ajax请求
    $.get('{% url "home_cartdel" %}',{'sid':cid},function(data){


        if(data['code']==0){
            hh.parents('tr').remove()
            
        }
        
    })

})



</script>

{% endblock %}





